<template>
  <ContentWrap v-show="setView === 'list'">
    <HeaderTitle title="电话会议" content="根据发布规则，用户组的设置自动组建电话会议，同时支持手动创建电话会议" :isdivider="false" />
  </ContentWrap>
  <ContentWrap v-show="setView === 'list'">
    <el-tabs v-model="activeName" class="custom-tabs">
      <el-tab-pane label="用户组" name="first" :key="index1">
        <UserGroup ref="groupRef" />
      </el-tab-pane>
      <el-tab-pane label="发布规则" name="second" :key="index2">
        <PublishRule ref="ruleRef" @openForms="openForms" />
      </el-tab-pane>
      <el-tab-pane label="会议记录" name="three" :key="index1">
        <CreateMeeting ref="meetingRef" @openForms="openForms" />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <ContentWrap v-show="setView === 'addMeeting'">
    <MeetingForm ref="formRef1" @success="refresh" @setClose="setClose" />
  </ContentWrap>
  <ContentWrap v-show="setView === 'addRule'">
    <PublishRuleForm ref="formRef2" @success="refresh" @setClose="setClose" />
  </ContentWrap>
  <ContentWrap v-show="setView === 'addGroup'">
    <GroupForm ref="formRef3" @success="refresh" @setClose="setClose" :groupNameId="groupNameId" />
  </ContentWrap>
</template>

<script lang="ts" setup>
import CreateMeeting from './createMeeting/index.vue'
import PublishRule from './publishRule/index.vue'
import UserGroup from './userGroups/index.vue'

import MeetingForm from './createMeeting/meetingForm.vue'
import PublishRuleForm from './publishRule/publishRuleForm.vue'
import GroupForm from './userGroups/groupForm.vue'
const groupObj = ref({})
const activeName = ref('first')
const index1 = ref(0)
const index2 = ref(0)
const index3 = ref(0)
watch(activeName, () => {
  if (activeName.value == 'first') {
    index1.value++
  } else if (activeName.value == 'second') {
    resetData()
    index2.value++
  } else if (activeName.value == 'third') {
    resetData()
    index3.value++
  }
})
const setView = ref('list')
const openName = ref('addMeeting')
const formRef1 = ref()
const formRef2 = ref()
const formRef3 = ref()
const groupNameId = ref('')
const meetingRef = ref()
const ruleRef = ref()
const groupRef = ref()
const openForms = (obj) => {
  const { type, id, typeForm } = obj
  setViewFun(typeForm)
  openName.value = typeForm
  if (typeForm == 'addMeeting') {
    formRef1.value.open(type, id)
  } else if (typeForm == 'addRule') {
    formRef2.value.open(type, id)
  }
}

// 新增、修改成功更新数据
// 会议新增成功 10、20秒时候请求列表
const number = ref(0)
let time = ref<any>()
const refresh = () => {
  if (openName.value == 'addMeeting') {
    number.value = 0;
    time.value = setInterval(() => {
      number.value++
      formRef1.value.getList()
    }, 10000);
  } else if (openName.value == 'addRule') {
    ruleRef.value.getList()
  } else if(openName.value == 'addGroup'){
    groupRef.value.groupsRef.getList()
  }
}
const resetData = ()=>{
  groupObj.value = {}
  groupNameId.value = ''
}
// const openGroup = (type,id) =>{
//   groupNameId.value = id
//   openName.value = 'addGroup'
//   formRef3.value.open(type,id)
// }
provide('groupFun', (type,id) =>{
  groupNameId.value = id
  openName.value = 'addGroup'
  setViewFun('addGroup')
  formRef3.value.open(type,id)
});
watch(number, () => {
  if (number.value == 6) {
    clearInterval(time.value)
  }
})
const setViewFun = (type: string) => {
  setView.value = type;
}
const setClose = () => {
  setView.value = 'list'
}
</script>

<style scoped lang="scss">
:deep(.custom-tabs) {
  /* 取消下划线 */
  .el-tabs__active-bar {
    display: none;
  }

  /* 可选：取消悬停时的下划线 */
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__item{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px!important;
    margin-right: 8px;
    color: #666;
  }
  /* 设置选中标签页的颜色和背景色 */
  .el-tabs__item.is-active {
    color: #1664FF; /* 选中标签页的文字颜色 */
    background: rgba(53, 96, 246, 0.1); /* 选中标签页的背景颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px!important;
    margin-right: 8px;
  }
}
</style>